<template>
  <!-- 表格 -->
  <a-table
    :columns="columns"
    :data-source="props.courses"
    :bordered="true"
    :loading="props.loading"
    :pagination="false"
    :scroll="{ y: 'calc(100vh - 200px)' }"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'courseName'">
        <a @click="viewDetail(record)">{{ text }}</a>
      </template>
      <template v-else-if="column.dataIndex === 'courseStatus'">
        <span v-if="text === 0">
          <a-tag color="warning">未开课</a-tag>
        </span>
        <span v-else-if="text === 1">
          <a-tag color="processing">进行中</a-tag>
        </span>
        <span v-else="text === 2">
          <a-tag color="default">已结课</a-tag>
        </span>
      </template>
      <template v-else-if="column.dataIndex === 'projectList'">
        <div style="display: flex; flex-wrap: wrap; justify-content: space-around">
          <a
            v-for="project in record.projectList"
            @click="router.push({ name: '项目详情', params: { projectId: 67 } })"
            >{{ project.projectName }}</a
          >
        </div>
      </template>

      <template v-else-if="column.dataIndex === 'createTime'">
        <span>{{ dayjs(text).format('YYYY-MM-DD HH:mm:ss') }}</span>
      </template>
    </template>
  </a-table>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs';
import router from '@/router';
import { useStore } from 'vuex';
const store = useStore();

const props = defineProps({
  courses: {
    type: Array,
    default: null
  },
  loading: {
    type: Boolean,
    default: true
  }
});

//初始化表格数据类型
const columns = ref(null);
columns.value = [
  {
    title: '课程名称',
    dataIndex: 'courseName',
    align: 'center'
  },
  {
    title: '课程状态',
    dataIndex: 'courseStatus',
    align: 'center'
  },
  {
    title: '关联项目',
    dataIndex: 'projectList',
    align: 'center'
  },
  {
    title: '创建日期',
    dataIndex: 'createTime',
    align: 'center'
  }
];

//点击项目后进入项目页面
function viewDetail(record) {
  //存入store
  store.commit('course/SET_COURSEID', record.courseId);
  store.commit('course/SET_PROJECTS', record.projectList);
  store.commit('course/SET_TEACHERS', record.teacherList);
  router.push({ name: '课程详情', params: { courseId: record.courseId } });
}
</script>

<style scoped>
.ant-table-wrapper {
  position: relative;
  height: 100%;
}
</style>
